<template>
  <view class="login">
    <view class="top">
      <uv-navbar
        title="注册"
        height="44px"
        titleStyle="{font-weight: bold;font-size: 1.1rem;}"
        bgColor="#dff8f7"
        @leftClick="leftClick"
      ></uv-navbar>
    </view>
    <view class="userlogin">
      <view class="userlogin1">
        <uv-input
          placeholder="请输入您的手机号"
          customStyle="border:none;padding: 2%;"
          v-model="phone"
        ></uv-input>
      </view>
      <view class="userlogin1">
        <uv-input
          placeholder="请输入您的密码"
          customStyle="border:none;padding: 2%;"
          v-model="password"
        ></uv-input>
      </view>
      <view class="userlogin1">
        <uv-input
          placeholder="确认密码"
          customStyle="border:none;padding: 2%;"
          v-model="confirmPassword"
        ></uv-input>
      </view>
      <view class="userlogin1">
        <uv-input
          placeholder="请输入验证码"
          customStyle="border:none;padding: 2%;"
          v-model="verificationCode"
        >
          <template v-slot:suffix>
            <uv-code
              ref="uCode"
              @change="codeChange"
              seconds="20"
              changeText="X秒重新获取"
            ></uv-code>
            <uv-button
              @click="getCode"
              :text="tips"
              color="#008c8c"
              type="success"
              size="mini"
            ></uv-button>
          </template>
        </uv-input>
      </view>
    </view>
    <view class="determine">
      <uv-button
        type="primary"
        color="#008c8c"
        shape="circle"
        text="注册"
        @click="register"
      ></uv-button>
      <button class="btn" @click="goLogin">登录</button>
    </view>
  </view>
</template>

<script>
import { uniRequest } from "../../utils/request/request";

export default {
  data() {
    return {
      phone: "",
      password: "",
      confirmPassword: "",
      verificationCode: "",
      tips: "",
    };
  },
  methods: {
    leftClick() {
      uni.navigateTo({ url: "/pages/login/login" });
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });

        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.showToast({
            title: "验证码已发送",
            duration: 2000,
          });

          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
          uniRequest(
            "login/sms?server=1",
            function (err, data) {
              if (err) {
                // 错误
                console.log(err);
              } else {
                console.log('"成功了"', data);
                uni.showToast({
                  title: "验证码是" + data, // 提示文字
                  duration: 6000, // 显示时间，单位ms，默认2秒
                  icon: "success",
                });
                const verificationCode = data;
              }
            },
            "POST",
            {
              mobile: "17852488120",
            }
          );
        }, 2000);
      } else {
        uni.showToast({
          title: "倒计时结束后再发送",
          duration: 2000,
        });
      }
    },
    register() {
      const mobile = this.phone;
      const password = this.password;
      const code = this.confirmPassword;
      console.log(mobile, password, code);
      uniRequest(
        "login/register?server=1",
        function (err, data) {
          if (err) {
            // 错误
            console.log(err);
          } else {
            console.log('"成功了"', data);
            uni.showToast({
              title: "注册成功", // 提示文字
              duration: 2000, // 显示时间，单位ms，默认2秒
              icon: "success",
            });
            uni.navigateTo({
              url: "/pages/login/login",
            });
          }
        },
        "POST",
        {
          mobile: mobile,
          code: code,
          password: password,
        }
      );
    },
    goLogin() {
      uni.navigateTo({ url: "/pages/login/login" }); // 手动跳转到登录页
    },
  },
};
</script>

<style lang="scss">
@import url("./registered.css");
</style>
